<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar :title="title"></fa-navbar>
		<u-sticky :enable="false">
			<!-- 用户信息 -->
			<fa-user-header :user="user" :showMore="showMore"></fa-user-header>
			<!-- 内容类型 -->
			<!-- #ifdef MP-BAIDU -->
			<fa-u-tabs
				:list="list"
				height="85"
				:is-scroll="false"
				:bar-width="barwidth"
				:active-color="theme.bgColor"
				:current="current"
				@change="change"
			></fa-u-tabs>
			<!-- #endif -->
			<!-- #ifndef MP-BAIDU -->
			<u-tabs :list="list" height="85" :is-scroll="false" :bar-width="barwidth" :active-color="theme.bgColor" :current="current" @change="change"></u-tabs>
			<!-- #endif -->
		</u-sticky>
		<!-- 我关注的粉丝 -->
		<view class="" v-if="!current">
			<view class="u-m-t-5">
				<u-swipe-action
					:show="item.show"
					:index="index"
					v-for="(item, index) in attentionList"
					:key="item.id"
					@click="click"
					@open="open"
					:options="item.options"
					v-if="item.expert"
				>
					<view class="item u-border-bottom" @click="goPage(0, item.source_id)">
						<image mode="aspectFill" :src="item.expert && item.expert.avatar" />
						<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
						<view class="title-wrap">
							<view class="text-bold">{{ item.expert && item.expert.nickname }}</view>
							<text class="signature u-p-t-10 u-line-2">{{ (item.expert && item.expert.bio) || vuex_bio }}</text>
						</view>
					</view>
				</u-swipe-action>
			</view>
			<view class="u-p-t-30 u-p-b-30" v-if="attentionList.length"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		</view>
		<!-- 我关注的问题 -->
		<view class="u-p-t-30 u-p-l-30 u-p-r-30" v-else>
			<view class="u-p-30 answer-item u-m-b-30" v-for="(item, index) in attentionList" :key="index" @click="goPage(1, item.source_id)" v-if="item.question">
				<view class="question">
					<u-tag :bg-color="theme.lightColor" :border-color="theme.faBorderColor" :color="theme.bgColor" text="问" mode="light" size="mini" />
					<text class="u-m-l-20">{{ item.question && item.question.title }}</text>
				</view>
				<view class="u-m-t-30 u-tips-color u-font-22">
					<u-parse
						:html="item.question && item.question.content_fmt"
						:tag-style="vuex_parse_style"
						:domain="vuex_config.upload ? vuex_config.upload.cdnurl : ''"
						@linkpress="navigate"
					></u-parse>
				</view>
			</view>
			<view class="u-p-t-10 u-p-b-30" v-if="attentionList.length"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		</view>
		<!-- 空数据 -->
		<wanl-empty style="padding:0;" v-if="!attentionList.length"></wanl-empty>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import { attention, others } from '@/common/fa.mixin.js';
export default {
	mixins: [attention, others],
	onLoad(e) {
		let query = this.$Route.query || e || {};
		let user_id = query.user_id || 0;
		if (user_id) {
			this.title = 'TA的关注';
			uni.setNavigationBarTitle({
				title: this.title
			});
			this.showMore = true;
			this.user = this.vuex_othen_user;
			this.list = [
				{
					name: 'TA关注的会员',
					text: 'user'
				},
				{
					name: 'TA关注的问题',
					text: 'question'
				}
			];
		} else {
			this.user = this.vuex_user;
			this.list = [
				{
					name: '我关注的会员',
					text: 'user'
				},
				{
					name: '我关注的问题',
					text: 'question'
				}
			];
		}
		this.getUserAttention();
	},
	data() {
		return {
			barwidth: 150,
			title: '我的关注',
			user: {},
			list: [],
			current: 0,
			scrollTop: 0,
			attentionList: [],
			disabled: false,
			btnWidth: 180,
			showMore: false,
			show: false,
			status: 'loadmore'
		};
	},
	methods: {
		change(index) {
			this.current = index;
			//重设Bar宽度
			this.barwidth = this.$util.strlen(this.list[index].name) * 30;
			this.page = 1;
			this.has_more = false;
			this.attentionList = [];
			this.getUserAttention();
		},
		click(index, index1) {
			if (index1 == 1) {
				//提问
				this.$wanlshop.to(`/pages/community/question/post?user_id=${this.attentionList[index].expert.id}`)
			} else {
				if (this.attentionList[index].expert.followed) {
					this.goAttentionDelete(this.attentionList[index].expert, 'user', () => {
						this.$set(this.attentionList[index].options[0], 'text', '添加关注');
					});
				} else {
					this.goAttentionCreate(this.attentionList[index].expert, 'user', () => {
						this.$set(this.attentionList[index].options[0], 'text', '取消关注');
					});
				}
			}
		},
		// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
		open(index) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.attentionList[index].show = true;
			this.attentionList.map((val, idx) => {
				if (index != idx) this.attentionList[idx].show = false;
			});
		},
		getUserAttention: async function() {
			let res = await this.$api.getUserAttention({
				id: this.user.id,
				type: this.list[this.current].text,
				page: this.page
			});
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			res.data.data.forEach(item => {
				item.show = false;
				if (!this.current) {
					item.options = [
						{
							text: item.expert.followed ? '取消关注' : '添加关注',
							style: {
								backgroundColor: this.theme.faBorderColor
							}
						},
						{
							text: '提问',
							style: {
								backgroundColor: this.theme.bgColor
							}
						}
					];
				}
			});
			this.attentionList = this.attentionList.concat(res.data.data);
			this.has_more = res.data.last_page < res.data.current_page;
		},
		goPage(index, id) {
			let p = [
				{
					path: `/pages/community/user/index?user_id=${id}`
				},
				{
					path: `/pages/community/question/detail?id=${id}`
				}
			];
			this.$wanlshop.to(p[index].path);
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getUserAttention();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}

.answer-item {
	background-color: #ffffff;
	box-shadow: 0 0 5px rgba(0, 134, 243, 0.1);
	border-radius: 3px;
}

.item {
	display: flex;
	padding: 20rpx;
	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
}

.signature {
	text-align: left;
	font-size: 20rpx;
	color: $u-content-color;
}

::v-deep .u-swipe-view view:nth-of-type(2) .u-btn-text {
	width: 140rpx;
	left: 54%;
}
</style>
